<template>
  <div class="langs">
    <div class="langs_content">
      <div class="title">{{ $t("message.cors") }}</div>
      <el-button @click="change" size="mini" type="primary">{{
        this.locale ? "切换中文" : "change-English"
      }}</el-button>
      <!-- ------------------------------------------------------------------------------ -->
      <div style="height: 100px; margin-top: 30px">
        <el-tag
          :closable="true"
          @close="handleClose(index,tag)"
          effect="dark"
          v-for="(tag,index) in tags"
          :key="tag.name"
          :type="tag.type"
          size='mini'
        >
          {{ tag.name }}
        </el-tag>
      </div>

      <!-- ------------------------------------------------------------------------------- -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locale: false,
      text: "",
      tags: [
        { name: "标签一", id: 1 },
        { name: "标签二", id: 2},
        { name: "标签三", id: 3 },
        { name: "标签四", id: 4},
        { name: "标签五", id: 5},
      ],
    };
  },
  mounted() {
    console.log(this.$t("message.type"), "SSSSS");
  },
  methods: {
    change() {
      if (this.$i18n.locale === "cn") {
        this.locale = true;
        this.$i18n.locale = "zn";
      } else {
        this.$i18n.locale = "cn";
        this.locale = false;
      }
    },
    handleClose(index,tag) {
      this.tags.splice(index,1)
    },
  },
};
</script>

<style scoped>
.langs {
  padding: 20px 10px;
  box-sizing: border-box;
  background: #f0f0f0;
  height: 100%;
}
.langs_content {
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid gray;
  background: #fff;
  border-radius: 5px;
  min-height: 100%;
}
.title {
  min-height: 80px;
  line-height: 80px;
  padding: 0 10px;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 20px;
  background: darkgoldenrod;
  margin-bottom: 50px;
}
.el-tag--dark {
  margin: 0 5px;
}
</style>